<template>
    <div>
        <h1>折线图</h1>
        <tab-switching :account="0" :data="menuItems" />
        <!--折线图-->
        <div class="line-chart" :style="{ height: height, width: width }"></div>
    </div>
</template>
<script>
import TabSwitching from '@/components/TabSwitching/TabSwitching.vue';
import menuItems from './ments.js';
import * as echarts from 'echarts'; // 引入echarts库

export default {
    name: 'LineChart',
    components: { TabSwitching },
    data() {
        return {
            menuItems,
            height: '400px',
            width: '100%'
        };
    },
    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            // 基于准备好的dom，初始化echarts实例
            const myChart = echarts.init(document.querySelector('.line-chart'));
            // 指定图表的配置项和数据
            const option = {
                title: {
                    text: '折线图'
                },
                tooltip: {
                    trigger: 'axis', // 鼠标悬停时显示提示框
                    textStyle: {
                        color: '#fff'
                    },
                    backgroundColor: 'rgba(0, 0, 0, 0.7)'
                },
                legend: {
                    data: ['销量', '采购']
                },
                xAxis: {
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                yAxis: {},
                series: [
                    {
                        name: '销量',
                        type: 'line',
                        symbolSize: 5, // 设置折线点的大小
                        smooth: true, // 设置折线是否平滑
                        lineStyle: {
                            color: '#559DFF', //
                            width: 3,
                            type: 'solid', //实线
                            shadowColor: 'rgba(85,157,255,0.3)', //设置阴影颜色
                            shadowBlur: 10, // 设置阴影的模糊程度
                            shadowOffsetY: 5 // 设置阴影的垂直方向偏移量
                        },
                        itemStyle: {
                            color: '#559DFF', // 设置折线点的颜色
                            borderColor: '#559DFF', // 设置折线点的边框颜色
                            borderWidth: 1 // 设置折线点的边框宽度
                        },
                        emphasis: {
                            // 鼠标悬停时的样式
                            focus: 'series', // 设置鼠标悬停时聚焦的元素
                            lineStyle: {
                                width: 6, // 设置鼠标悬停时的线宽
                                opacity: 0.8 // 设置鼠标悬停时的线透明度
                            },
                            itemStyle: {
                                borderWidth: 2, // 设置鼠标悬停时的点边框宽度
                                shadowColor: 'rgba(85,157,255,0.5)', // 设置鼠标悬停时的点阴影颜色
                                shadowBlur: 10 // 设置鼠标悬停时的点阴影模糊程度
                            }
                        },
                        label: {
                            //     设置折线上的数值
                            show: true,
                            position: 'top',
                            textStyle: {
                                fontSize: 12,
                                color: '#559DFF'
                            }
                        },
                        data: [10, 6, 38, 8, 12, 15]
                    },
                    {
                        name: '采购',
                        type: 'line',
                        symbolSize: 5, // 设置折线点的大小
                        smooth: true, // 设置折线是否平滑
                        lineStyle: {
                            width: 3
                        },
                        data: [5, 20, 36, 10, 10, 20]
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    }
};
</script>

<style scoped></style>
